<template>
    <div class="container">
        <CustomNav custom-title="测评结果" theme="light" />
        <div class="content">
            <div class="bg-gray">
                <div class="content-top">
                    <van-image class="img-icon" fit="cover" position="left" :src="reportData.poster" />
                    <div class="title">{{ reportData.name }}</div>
                    <div class="title-sub" v-html="reportData.description"></div>
                </div>
                <div class="content-bottom">
                    <div class="information info-flex" v-if="reportData.appraiseName">
                        <div class="info-title">{{ reportData.appraiseName + ':' }}</div>
                        <div class="info-desc" v-html="reportData.appraise"></div>
                    </div>
                    <div class="information" v-for="(item, index) in reportKeyValData" :key="index">
                        <div class="info-title">{{ item.key }}</div>
                        <div class="info-desc" v-if="!item.isTable" v-html="item.value"></div>
                        <div class="info-desc" v-else>
                            <table>
                                <thead>
                                    <tr>
                                        <th v-for="(col, i) in item.value.theads"
                                            :class="`table-col-${i + 1} tablb-col-head`">
                                            {{ col }}
                                        </th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr v-for="d in item.value.data">
                                        <td v-for="(key, i) in item.value.theads" :class="`table-col-${i + 1}`">
                                            {{ d[key] }}
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref, onActivated } from 'vue';
import { useRoute } from 'vue-router';
import CustomNav from '@/pages/components/CustomNav/index.vue'
import type { ReportDataProps } from '../type';
import { getExamsResult } from '../../api/Home';
const baseKeys: string[] = ['name', 'poster', 'description', 'appraiseName', 'appraise']
const excludeKeys: string[] = ['time', 'time2', 'score', 'scoreFormat']
const route = useRoute();
const reportData = ref<Partial<ReportDataProps>>({})
const reportKeyValData = ref<any[]>([])
const initData = async () => {
    const { id, examType } = route.params;
    if (id !== void 0) {
        console.log(examType);

        const { code, data } = await getExamsResult(`${id}`)
        if (`${code}` === '0') {
            const { data: valueData, field_options } = data
            const tempReportData: any = {}
            const tempReportKeyValData: any[] = []
            Object.keys(valueData).forEach((key: string) => {
                if (baseKeys.includes(key)) {
                    tempReportData[key] = valueData[key]
                } else {
                    if (!excludeKeys.includes(key)) {
                        const tempData: any = {}
                        tempData.key = field_options[key]
                        tempData.value = valueData[key]
                        if (examType === 'MBTI3' && key === 'dimension') {
                            tempData.isTable = true
                            const columns = Object.keys(valueData[key][0])
                            tempData.value = {
                                theads: columns,
                                data: valueData[key]
                            }
                        }
                        if (tempData.key !== undefined && tempData.value !== undefined && tempData.value !== null) {
                            tempReportKeyValData.push(tempData)
                        }
                    }
                }
            })
            reportData.value = tempReportData
            reportKeyValData.value = tempReportKeyValData

        }
    }
}
onActivated(() => {
    initData();
})

</script>

<style lang="scss" scoped>
.container {
    height: 100vh;
    overflow: hidden;
    background-color: $color_white;
    display: flex;
    flex-direction: column;

    .content {
        flex: 1;
        overflow-y: scroll;

        .bg-gray {
            background-color: $color_bg_grey;

            .content-top {
                width: 100%;
                // height: 375px;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: space-between;
                background-color: $color_white;
                padding: 30px 15px;
                padding-bottom: 33px;

                .img-icon {
                    height: 180px;
                    border-radius: 6px;
                    overflow: hidden;
                }

                .title {
                    font-size: 18px;
                    color: $color_text_dark;
                    margin: 20px 0;
                }

                .title-sub {
                    font-size: 13px;
                    line-height: 24px;
                    text-align: center;
                    color: $color_text_grey_6;
                }

                .btn-start {
                    width: 238px;
                }
            }

            .content-bottom {
                width: 100%;
                margin-top: 10px;

                .information {
                    padding: 15px;
                    background-color: $color_white;

                    &.info-flex {
                        display: flex;
                        align-items: center;

                        .info-desc {
                            padding: 0 !important;
                            margin-top: 0 !important;
                            margin-left: 15px;
                        }
                    }

                    .info-title {
                        font-size: 16px;
                        color: $color_text_dark;
                        font-weight: bold;
                    }

                    .info-desc {
                        font-size: 13px;
                        color: $color_text_grey;
                        letter-spacing: 0.02em;
                        padding: 10px 15px;
                        border-radius: 6px;
                        margin-top: 10px;
                        line-height: 24px;
                        text-align: justify;

                        .tablb-col-head {
                            // text-align: center;
                            font-weight: bold;
                        }

                        .table-col-1 {
                            width: 10%;
                            overflow: hidden;
                        }

                        .table-col-2 {
                            width: 20%;
                            overflow: hidden;
                        }

                        .table-col-3 {
                            width: 10%;
                            overflow: hidden;
                        }

                        .table-col-4 {
                            width: 60%;
                            overflow: hidden;
                        }
                    }
                }
            }
        }

    }
}
</style>